import React from 'react';
import { Timeline } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import styles from './home.module.css';

export default function AskSick() {
  const getDayOfWeek = (date) => {
    const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    return daysOfWeek[date.getDay()];
  };

  const getFormattedDate = (date) => {
    return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
  };

  const today = new Date();
  const generateDates = (baseDate, offset) => {
    const dates = [];
    for (let i = 0; i < 3; i++) {
      const date = new Date(baseDate);
      date.setDate(baseDate.getDate() + offset * (i + 1));
      dates.push({
        dayOfWeek: getDayOfWeek(date),
        formattedDate: getFormattedDate(date),
      });
    }
    return dates;
  };

  const previousThreeDays = generateDates(today, -1);
  const nextThreeDays = generateDates(today, 1);
  const todayInfo = {
    dayOfWeek: getDayOfWeek(today),
    formattedDate: getFormattedDate(today),
  };

  const items = [
        {
          label: '2015-09-01',
          children: 'Create a services',
        },
        {
          label: '2015-09-01 09:12:11',
          children: 'Solve initial network problems',
        },
        {
          children: 'Technical testing',
        },
        {
          label: '2015-09-01 09:12:11',
          children: 'Network problems being solved',
        },
  ];

  return (
    <div className={styles.container}>
        <div>
            问诊提醒
        </div>
      <div className={styles.dateContainer}>
        <div className={styles.dateBox} style={{ textAlign: 'right' }}>
          {previousThreeDays.map((dateInfo, index) => (
            <div key={index} className={styles.dateItem}>
              <span>{dateInfo.dayOfWeek}, {dateInfo.formattedDate}</span>
            </div>
          ))}
        </div>
        <div className={styles.dateBoxCenter} style={{ textAlign: 'center' }}>
          <div className={styles.dateItem}>
            <span style={{ fontWeight: 'bold' }}>{todayInfo.dayOfWeek} {todayInfo.formattedDate}</span>
          </div>
        </div>
        <div className={styles.dateBox} style={{ textAlign: 'left' }}>
          {nextThreeDays.map((dateInfo, index) => (
            <div key={index} className={styles.dateItem}>
              <span>{dateInfo.dayOfWeek}, {dateInfo.formattedDate}</span>
            </div>
          ))}
        </div>
      </div>
      <div className={styles.timelineContainer}>
        <Timeline mode="left" items={items}>
          {items.map((item, index) => (
            <Timeline.Item key={index} {...item} dot={item.dot || <ClockCircleOutlined />}>
              {item.children}
            </Timeline.Item>
          ))}
        </Timeline>
      </div>
    </div>
  );
}